<template>
  {{ title }}
  <el-form
    label-position="top"
    label-width="100px"
    :model="formData.data"
    style="max-width: 360px"
  >
    <el-form-item label="分类类型">
      <el-select
        v-model="type"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="分类名称:">
      <el-input v-model="formData.data.name" />
    </el-form-item>
    <el-form-item label="分类权重:">
      <el-input v-model="formData.data.sort" />
    </el-form-item>
  </el-form>

  <el-button @click="methods.send(true)">取消</el-button>
  <el-button type="primary" @click="methods.requestData"> 保存分类 </el-button>
</template>
<script lang="ts">
import { categoryAdd } from "@/api/CategoryManage";
import {
  CategoryAddReqForm,
  CategoryAddReqFormWrapper,
} from "@/entity/entityDefine";
import { ElMessage } from "element-plus";
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  emits: ['fatherFun'], // 避免vue3 emit 报错
  name: "CategoryEdit",
  props: {
    msg: String,
    title: String,
  },
  setup(props, { emit }) {
    const type = ref("");
    const options = [
      {
        value: "1",
        label: "菜品",
      },
      {
        value: "2",
        label: "套餐",
      },
    ];
    const data: CategoryAddReqForm = {
      name: "",
      type: 0,
      sort: 0,
    };
    const formData: CategoryAddReqFormWrapper = reactive({
      data: data,
    });

    const methods = {
      send(result: boolean) {
        emit("fatherFun", result); // 第一个参数是子组件派发的函数名(子传父是通过函数事件派发)
      },

      async requestData() {

        formData.data.type = type.value === "1"?1:2;
        const { code, msg, data } = await categoryAdd(formData.data);

        if (code == 200) {
          ElMessage.success("添加成功");
          // 清空数据
          formData.data = {
            name: "",
            type: 1,
            sort: 0,
          };
          type.value = "";

          methods.send(true);
        } else {
          methods.send(false);
          // 网络层已提示信息
          // console.log(msg);
        }
      },
    };

    return {
      formData,
      methods,
      options,
      type
    };
  },
});
</script>

function emit(arg0: string, str: any) { throw new Error("Function not
implemented."); }

<style>
.el-form-item__content {
    /* display: flex; */
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    line-height: 32px;
    position: relative;
    font-size: var(--font-size);
    min-width: 0;
}
</style>